<template>
  <div>
    <div class="search-nav">
      <div class="search-nav-container w">
        <ul>
          <li>商品详情</li>
        </ul>
      </div>
    </div>
    <div class="w item-detail-show">
      <div class="item-detail-left">
        <div class="item-detail-big-img">
          <img :src="goodsDetail.goodsDetail.picture" alt="">
        </div>
      </div>
      <div class="item-detail-right">
        <div class="item-detail-title">
          <p>
            <span class="item-detail-express">校园配送</span> {{goodsDetail.goodsDetail.commodity}}
          </p>
        </div>
        <div class="item-detail-tag">
          <p>
            <span v-for="(item,index) in goodsDetail.goodsInfo.tags" :key="index">【{{item}}】</span>
          </p>
        </div>
        <div class="item-detail-price-row">
          <div class="item-price-left">
            <div class="item-price-row">
              <p>
                <span class="item-price-title">优惠价格</span>
                <span class="item-price">￥{{goodsDetail.goodsDetail.price.toFixed(2)}}</span>
              </p>
            </div>

            <div class="item-price-row">
              <p>
                <span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                <span class="item-price-full-cut" v-for="(item,index) in  goodsDetail.goodsInfo.promotion" :key="index">{{item}}</span>
              </p>
            </div>
          </div>
          <!-- <div class="item-price-right">
            <div class="item-remarks-sum">
              <p>累计评价</p>
              <p>
                <span class="item-remarks-num">{{ goodsDetail.goodsInfo.remarksNum}} 条</span>
              </p>
            </div>
          </div> -->
        </div>

        <div class="add-buy-car-box">
          <div class="add-buy-car">
            <div class="item-select-title" style="margin-right:14px;">
              <p>购买数量</p>
            </div>
            <InputNumber :min="1" v-model="goodsDetail.goodsDetail.addNumber" size="large"></InputNumber>
          </div>
          <Button type="error" size="large" @click="addShoppingCartBtn()">加入购物车</Button>
        </div>
      </div>
    </div>
    <!-- 规格参数 -->
    <div class="goods-tabs w">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="规格参数" name="second">
          <div class="remarks-title">
            <span>规格参数</span>
          </div>
          <div class="item-param-container">
            <span class="item-param-box" v-for="(item,index) in  goodsDetail.goodsDetail.info" :key="index">
              <span class="item-param-title">{{item.title}}: </span>
              <span class="item-param-content">{{item.content}}</span>
            </span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户评价" name="third">
          <div class="remarks-container">
            <div class="remarks-title">
              <span>商品评价</span>
            </div>
            <div class="remarks-analyse-box">
              <div class="remarks-analyse-goods">
                <i-circle :percent=" goodsDetail.goodsDetail.remarks.goodAnalyse" stroke-color="#e4393c">
                  <span class="remarks-analyse-num">{{goodsDetail.goodsDetail.remarks.goodAnalyse}}%</span>
                  <p class="remarks-analyse-title">好评率</p>
                </i-circle>
              </div>
              <div class="remarks-analyse-tags">
                <Tag checkable :color="tagsColor[index % 4]" v-for="(item,index) in goodsDetail.goodsDetail.remarks.remarksTags" :key="index">{{item}}</Tag>
              </div>
            </div>
            <div class="remarks-bar">
              <span>好评({{ goodsDetail.goodsDetail.remarks.remarksNumDetail[0]}})</span>
              <span>追评({{ goodsDetail.goodsDetail.remarks.remarksNumDetail[1]}})</span>
              <span>中评({{ goodsDetail.goodsDetail.remarks.remarksNumDetail[2]}})</span>
              <span>差评({{ goodsDetail.goodsDetail.remarks.remarksNumDetail[3] || 0}})</span>
            </div>
            <div class="remarks-box" v-for="(item,index) in  goodsDetail.goodsDetail.remarks.detail" :key="index">
              <div class="remarks-user">
                <Avatar icon="person" />
                <span class="remarks-user-name">{{item.username ? item.username:'匿名用户'}}</span>
              </div>
              <div class="remarks-content-box">
                <p>
                  <Rate disabled :value="item.star" allow-half class="remarks-star"></Rate>
                </p>
                <p class="remarks-content">{{item.content}}</p>
                <p class="remarks-sub">
                  <span class="remarks-item">{{item.goods}}</span>
                  <span class="remarks-time">{{item.createTime}}</span>
                </p>
              </div>
            </div>
            <div class="remarks-page">
              <Page :total="10" size="small" show-elevator show-sizer></Page>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>
import { addShoppingCart } from "@/api/goods"
export default {

  data() {
    return {
      tagsColor: ['blue', 'green', 'red', 'yellow'],
      activeName: 'second',
      price: 0,
      selectBoxIndex: 0,
      imgIndex: 0
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 加入购物车
    addShoppingCartBtn() {
      // addNumber
      const that = this
      addShoppingCart(this.$store.state.goodsDetail.goodsDetail).then(res => {
        this.$confirm('加入购物车成功，是否查看购物车?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$router.push({ path: '/goodsCar' }).catch(() => { });
        }).catch(() => {
          that.$router.push({ path: '/' }).catch(() => { });
        });
      })

    }
  },
  computed: {
    goodsDetail() {
      return this.$store.state.goodsDetail
    }
  },
  created() {
    console.log('object :>> ', this.goodsDetail.goodsDetail);
  },
  mounted() {
    const father = this;
    setTimeout(() => {
      father.price = father.goodsDetail.goodsInfo.setMeal[0][0].price || 0;
    }, 300);
  }
};

</script>

<style lang="scss" scoped>
.item-detail-show {
  margin: 15px auto;
  display: flex;
  flex-direction: row;
  background-color: #fff;
}
.item-detail-left {
  width: 350px;
  margin-right: 30px;
}

.item-detail-big-img {
  width: 350px;
  height: 350px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
}

.item-detail-big-img img {
  width: 100%;
  height: 100%;
}

.item-detail-img-row {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.item-detail-img-small {
  width: 68px;
  height: 68px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
}

.item-detail-img-small img {
  width: 100%;
}
.item-detail-right {
  display: flex;
  flex-direction: column;
}

.item-detail-title p {
  color: #666;
  font-size: 20px;
}

.item-detail-express {
  font-size: 14px;
  padding: 2px 3px;
  border-radius: 3px;
  background-color: #e4393c;
  color: #fff;
}

/*商品标签*/
.item-detail-tag {
  font-size: 12px;
  color: #e4393c;
}

/*价格详情等*/
.item-detail-price-row {
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #f3f3f3;
}

.item-price-left {
  display: flex;
  flex-direction: column;
}

.item-price-title {
  color: #999999;
  font-size: 14px;
  margin-right: 15px;
}

.item-price-row {
  margin: 5px 0px;
}

.item-price {
  color: #e4393c;
  font-size: 23px;
  cursor: pointer;
}

.item-price-full-cut {
  margin-right: 5px;
  padding: 3px;
  color: #e4393c;
  font-size: 12px;
  background-color: #ffdedf;
  border: 1px dotted #e4393c;
  cursor: pointer;
}

.item-remarks-sum {
  padding-left: 8px;
  border-left: 1px solid #ccc;
}

.item-remarks-sum p {
  color: #999999;
  font-size: 12px;
  line-height: 10px;
  text-align: center;
}

.item-remarks-num {
  line-height: 18px;
  color: #005eb7;
}

.item-select {
  margin-top: 15px;
  height: 134px;
}

.add-buy-car-box {
  width: 100%;
  margin-top: 15px;
  border-top: 1px dotted #ccc;
}

.add-buy-car {
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.goods-tabs {
  margin-bottom: 24px;
  // overflow: hidden;
}
.goods-tabs ::v-deep {
  .el-tabs__item.is-active {
    color: #c86147;
  }
  .el-tabs__active-bar {
    background-color: #c86147;
  }
}

.item-param-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  // justify-content: space-between;
}
.item-param-box {
  padding: 5px;
  padding-left: 30px;
  width: 240px;
  // height: 36px;
  font-size: 14px;
  /* text-align: center; */
  /* background-color: #ccc; */
}
.item-param-title {
  color: #232323;
}
.item-param-content {
  color: #999;
}
.remarks-title {
  padding-left: 15px;
  height: 36px;
  font-size: 16px;
  font-weight: bolder;
  line-height: 36px;
  color: #666666;
  background-color: #f7f7f7;
}
.remarks-analyse-box {
  padding: 15px;
  display: flex;
  align-items: center;
}
.remarks-analyse-goods {
  margin-left: 15px;
  margin-right: 15px;
}
.remarks-analyse-num {
  font-size: 26px;
}
.remarks-analyse-title {
  font-size: 12px;
  line-height: 20px;
}
.remarks-bar {
  padding-left: 15px;
  height: 36px;
  line-height: 36px;
  color: #666666;
  background-color: #f7f7f7;
}
.remarks-bar span {
  margin-right: 15px;
}
.remarks-box {
  padding: 15px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #ccc dotted;
}
.remarks-user {
  width: 120px;
}
.remarks-user-name {
  padding-left: 15px;
}
.remarks-content-box {
  width: calc(100% - 180px);
}
.remarks-star {
  background-color: #fff;
}
.remarks-content {
  font-size: 14px;
  color: #232323;
  line-height: 28px;
}
.remarks-sub {
  margin-top: 15px;
  color: #ccc;
}
.remarks-time {
  // margin-left: 15px;
}
.remarks-page {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>

